<template>
    <div ref="chartDom" :style="{ width: '100%', height: '400px' }"></div>
</template>
  
<script setup>
    import * as echarts from 'echarts'
    import { onMounted, ref } from 'vue'

    const chartDom = ref()
    let chart

    const initChart = () => {
        chart = echarts.init(chartDom.value)
        chart.setOption({
                title: {
                text: '当月每日收费金额统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['收费金额'],
                left: 'left'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                name: '日',
                boundaryGap: false,
                data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'] // Example dates
            },
            yAxis: {
                type: 'value',
                name: '金额'
            },
            toolbox: {
                show: true,
                feature: {
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: '收费金额',
                    type: 'line',
                    areaStyle: {
                        color: '#ffd7d7'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210, 150, 200, 300, 230, 220, 180, 190, 220, 300, 280, 250, 270, 310, 340, 330, 310, 290, 310, 320, 340, 360, 370, 380] // Example data
                }
            ]
        })
    }

    onMounted(() => {
        initChart()
    })
</script>

<style scoped>
/* Add any specific styles here */
</style>
